<template>
	<view class="cnotent">
		<view class="left-v">
			<view @click="toSelectOne(index)" :class="{ 'active': item.isActive, 'baseClass': true }" v-for="(item, index) in oneList" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="right-v"> 
		<view class="tabClass">
			<vgt-tab  :list="twoListTab"  :itemStyleActive="{color: '#e98f36',border: '1rpx solid #e98f36;'}" :isUseOpenList=false @onValueChange="onValueChange"></vgt-tab>
		</view>
		<view class="three-v">
			<text @click="toDetail(item.name)" class="item"  v-for="(item, index) in threeList" :key="index">
				{{item.name}}
			</text>
		</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				oneActiveIndex:0,
				twoActiveIndex:0,
				oneList:[
				],
				twoListTab:[
				],
				twoList:[
				],threeList:[
				]
			}
		},
		methods:{
			toDetail(threeName){
				let type = this.twoList[this.twoActiveIndex].name;
				let cpName = threeName;
				uni.navigateTo({
					url:'list?type='+type+'&cpName='+cpName
				})
			},
			onValueChange(val){
				this.twoActiveIndex = val.currentInd;
				let opts = {
					url: 'cookBookNew/getCateByParentId/'+this.twoList[val.currentInd].id,
					method: 'get'
				};
				let param = {
				};
				this.baseRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					this.threeList = rData.r;
				}, error => {})
				
			},
			toSelectOne(index){
				this.oneList[this.oneActiveIndex].isActive = false;
				this.oneList[index].isActive = true;
				this.oneActiveIndex = index;
				
				let opts = {
					url: 'cookBookNew/getCateByTopParentId/'+this.oneList[index].id,
					method: 'get'
				};
				let param = {
				};
				this.baseRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					this.twoList = rData.r2;
					this.twoActiveIndex = 0;
					this.twoListTab = [];
					for (var i = 0; i < this.twoList.length; i++) {
						this.twoListTab.push(this.twoList[i].name);
					}
					this.threeList = rData.r3;
				}, error => {})
			}
		},onLoad() {
			let opts = {
				url: 'cookBookNew/getCate',
				method: 'get'
			};
			let param = {
			};
			this.baseRequest(opts, param).then(res => {
				uni.hideLoading();
				let rData = res.data;
				this.oneList = rData.r1;
				this.oneList[0].isActive = true;
				
				this.twoList = rData.r2;
				for (var i = 0; i < this.twoList.length; i++) {
					this.twoListTab.push(this.twoList[i].name);
				}
				this.threeList = rData.r3;
			}, error => {})
		}
	}
</script>

<style>
	.three-v{
		padding: 30rpx;
		height: calc(100vh - 200rpx);
		overflow: scroll;
	}
	.three-v .item{
		background-color: #e98f36;
		padding: 10rpx;
		border-radius: 15rpx;
		color: #fff;
		margin-left: 15rpx;
		margin-top: 20rpx;
		text-align: center;
		float: left;
		width: 200rpx !important;
		overflow: hidden;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.tabClass{
		background-color: #CCCCCC !important;
		margin: 10rpx;
		border-radius: 10rpx;
	    border: 5rpx solid #e98f36;
	}
	.left-v{
		width: 200rpx;
		background-color: #F5F5F5;
		height: 100vh;
		float: left;
	}
	.right-v{
		width: 550rpx;
		background-color: #fff;
		height: 100vh;
		float: right;
		overflow: scroll;
	}
	.baseClass{
		padding: 20rpx 0;
		text-align: center;
	}
	.active{
		background-color: #fff;
		font-size: 36rpx;
		font-weight: 800;
		border-left: 8rpx solid #e98f36;
	}
</style>
